<template>
	<view class="page">
		<!-- 状态提示 -->
		<view class="Status_prompt">
			<view class="success">
				<view class="successIcon">
					<view class="left">
						
					</view>
					<view class="right">
						
					</view>
				</view>
				<view class="successText">
					已支付
				</view>
			</view>
			<view class="prompt">
				您已缴费成功，如需打印发票请联系医院工作人员，目前药品暂不支持快递配送，请到院门诊药房6号便民窗口取药
			</view>
		</view>
		<!-- 开单信息 -->
		<view class="Billing_information">
			<view class="title">
				开单信息
			</view>
			<view class="infolists">
				<view class="infolist">
					<view class="list_title">
						申请医院
					</view>
					<view class="list_content">
						四川省保健院北苑
					</view>
				</view>
				<view class="infolist">
					<view class="list_title">
						就诊患者
					</view>
					<view class="list_content">
						{{patientInfo.name}}
					</view>
				</view>
				<view class="infolist">
					<view class="list_title">
						登记卡号
					</view>
					<view class="list_content">
						{{patientInfo.Medicalrecord}}
					</view>
				</view>
				<view class="infolist">
					<view class="list_title">
						开单金额
					</view>
					<view class="list_content">
						￥{{Number(recordInfo.subtotal).toFixed(2)}}
					</view>
				</view>
				<view class="infolist">
					<view class="list_title">
						申请时间
					</view>
					<view class="list_content">
						{{new Date(recordInfo.applyTime).getFullYear()+'-'+String(new Date(recordInfo.applyTime).getMonth() + 1).padStart(2, '0')+'-'+String(new Date(recordInfo.applyTime).getDate()).padStart(2, '0')+' '+String(new Date(recordInfo.applyTime).getHours()).padStart(2, '0')+':'+String(new Date(recordInfo.applyTime).getMinutes()).padStart(2, '0')+':'+String(new Date(recordInfo.applyTime).getSeconds()).padStart(2, '0')}}
					</view>
				</view>
			</view>
		</view>
		<!-- 开单项目 -->
		<view class="Billing_project">
			<view class="title">
				开单项目
			</view>
			<view class="projectlists">
				<view class="projectlist" v-for="(item,index) in medicine" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo">
								药
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：{{item.amount}}剂
					</view>
					<view class="tags">
						<view class="tag" v-for="(tag,n) in item.tags" :key="n" :style="n==1?'background-color: rgba(255, 240, 237, 1); color: #FF4D4F;':''">
							{{tag}}
						</view>
					</view>
				</view>
				<!-- <view class="projectlist">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo">
								药
							</view>
							<view class="project_title">
								云南白药胶囊 0.5g*20片
							</view>
						</view>
						<view class="price">
							￥10.80
						</view>
					</view>
					<view class="amount">
						数量：1盒
					</view>
					<view class="tags">
						<view class="tag">
							处方药
						</view>
					</view>
				</view> -->
				<view class="projectlist" v-for="(item,index) in inspext" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo" style="background-color: rgba(255, 242, 232, 1);color: #FF7A45;">
								查
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：1次
					</view>
				</view>
				<view class="projectlist" v-for="(item,index) in test" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo" style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
								验
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：1次
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderInfo">
			<view class="title">
				订单信息
			</view>
			<view class="orderlists">
				<view class="orderlist">
					<view class="list_title">
						订单号
					</view>
					<view class="lists_content">
						2021010156256894<text style="color: #1677FF;margin-left: 4rpx;">复制</text>
					</view>
				</view>
				<view class="orderlist">
					<view class="list_title">
						订单流水号
					</view>
					<view class="lists_content">
						400012021010156256894
					</view>
				</view>
				<view class="orderlist">
					<view class="list_title">
						订单金额
					</view>
					<view class="lists_content">
						￥{{Number(recordInfo.subtotal).toFixed(2)}}
					</view>
				</view>
				<view class="orderlist">
					<view class="list_title">
						订单状态
					</view>
					<view class="lists_content">
						已支付
					</view>
				</view>
				<view class="orderlist">
					<view class="list_title">
						支付方式
					</view>
					<view class="lists_content">
						微信支付
					</view>
				</view>
				<view class="orderlist">
					<view class="list_title">
						下单时间
					</view>
					<view class="lists_content">
						{{new Date(recordInfo.applyTime).getFullYear()+'-'+String(new Date(recordInfo.applyTime).getMonth() + 1).padStart(2, '0')+'-'+String(new Date(recordInfo.applyTime).getDate()).padStart(2, '0')+' '+String(new Date(recordInfo.applyTime).getHours()).padStart(2, '0')+':'+String(new Date(recordInfo.applyTime).getMinutes()).padStart(2, '0')+':'+String(new Date(recordInfo.applyTime).getSeconds()).padStart(2, '0')}}
					</view>
				</view>
				<view class="orderlist">
					<view class="list_title">
						支付时间
					</view>
					<view class="lists_content">
						{{recordInfo.paytime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../src/utils/api.js'
	import { reactive, ref } from 'vue'
	const patientInfo = ref({})
	const recordInfo = ref({
		subtotal:'',
		paytime:'',
		applyTime:''
	})
	const medicine = reactive([])	//开单药品
	const inspext = reactive([])	//开单检查
	const test = reactive([])		//开单检验
	onLoad((option)=>{
		console.log(option)
		api('/patientid',{
			id:option.patientid
		}).then(res=>{
			patientInfo.value = res[0]
		}).catch(err=>{
			console.log(err)
		})
		api('/applyselectreacord',{
			record_id:option.recordid
		}).then(res=>{
			recordInfo.value = res.dataes[0]
			medicine.push(...JSON.parse(res.dataes[0].medicine))
			inspext.push(...JSON.parse(res.dataes[0].inspect))
			test.push(...JSON.parse(res.dataes[0].test))
		}).catch(err=>{
			console.log(err)
		})
	})
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f2f2f2;
		min-height: 100vh;
		.Status_prompt{
			height: 288rpx;
			background-color: #fff;
			border-top: 2rpx solid #f2f2f2;
			box-sizing: border-box;
			padding: 38rpx 40rpx;
			.success{
				height: 70rpx;
				display: flex;
				align-items: center;
				.successIcon{
					width: 70rpx;
					height: 70rpx;
					border: 4rpx solid rgba(54, 207, 201, 1);
					background-color: #fff;
					box-sizing: border-box;
					border-radius: 50%;
					position: relative;
					.left{
						width: 4rpx;
						height: 14rpx;
						background-color: rgba(54, 207, 201, 1);
						border-radius: 40rpx;
						transform: rotate(135deg);
						position: absolute;
						left: 20rpx;
						top: 30rpx;
					}
					.right{
						width: 4rpx;
						height: 28rpx;
						background-color: rgba(54, 207, 201, 1);
						border-radius: 40rpx;
						transform: rotate(45deg);
						position: absolute;
						left: 32rpx;
						top: 18rpx;
					}
				}
				.successText{
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					color: #13C2C2;
					font-size: 36rpx;
					font-weight: 700;
					margin-left: 30rpx;
				}
			}
			.prompt{
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #7F7F7F;
				text-align: justify;
				line-height: 40rpx;
				margin-top: 30rpx;
			}
		}
		// 开单信息
		.Billing_information{
			width: 100%;
			height: 412rpx;
			background-color: #fff;
			margin: 30rpx 0;
			padding: 36rpx 40rpx;
			box-sizing: border-box;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				font-weight: 700;
				color: #000;
			}
			.infolists{
				margin-top: 26rpx;
				.infolist{
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 16rpx;
					.list_title{
						color: #AAAAAA;
					}
				}
			}
		}
		// 开单项目
		.Billing_project{
			padding: 34rpx 40rpx;
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				font-weight: 700;
				color: #000;
			}
			.projectlists{
				.projectlist{
					padding-top: 40rpx;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #f2f2f2;
					.lineOne{
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.titleInfo{
							display: flex;
							height: 44rpx;
							align-items: center;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #000;
							.logo{
								width: 34rpx;
								height: 44rpx;
								line-height: 44rpx;
								border-radius: 4rpx;
								background-color: rgba(240, 245, 255, 1);
								color: #2F54EB;
								text-align: center;
								font-size: 24rpx;
							}
							.project_title{
								font-size: 32rpx;
								line-height: 44rpx;
								margin-left: 10rpx;
							}
						}
						.price{
							color: #FF4D4F;
						}
					}
					.amount{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						color: #7f7f7f;
						margin-top: 20rpx;
					}
					.tags{
						margin-top: 14rpx;
						display: flex;
						align-items: center;
						.tag{
							padding: 8rpx 9rpx;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							// line-height: 44rpx;
							background-color: rgba(240, 247, 255, 1);
							color: #007AFF;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
		// 订单信息
		.orderInfo{
			width: 100%;
			height: 532rpx;
			background-color: #fff;
			padding: 34rpx 40rpx;
			box-sizing: border-box;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				font-weight: 700;
				color: #000;
			}
			.orderlists{
				margin-top: 36rpx;
				.orderlist{
					height: 40rpx;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 16rpx;
					.list_title{
						color: #AAAAAA;
					}
				}
			}
		}
	}       
</style>
